import { OrderDetail } from '@/api/order';
import useCustomerService from '@/components/useCustomerService';
import { Button, Cell } from '@antmjs/vantui';
import { Text, View } from '@tarojs/components';
import { useRouter } from '@tarojs/taro';
import { useRequest } from 'taro-hooks';
import useEvaluate from '../../appointment/components/useEvaluate';

export default function Page() {
  const { renderNode: renderServiceNode, open: openService } =
    useCustomerService();

  const router = useRouter();
  const { data: detail, refresh } = useRequest(
    () =>
      OrderDetail({
        id: router?.params?.id!,
      }),
    {
      ready: router.params?.id ? true : false,
    }
  );

  const { renderNode: renderEvaluateNode, open: openEvaluate } = useEvaluate({
    detail: detail!,
    onSuccess: () => refresh(),
  });

  return (
    <>
      <View className='p-4'>
        <Cell
          title='预约人:'
          titleWidth='120px'
          value={detail?.user_name}
          border={false}
          className=' rounded-lg mb-3'
        />

        <Cell
          titleWidth='120px'
          title='所在公司:'
          value={detail?.user_company}
          border={false}
          className=' rounded-lg mb-3'
        />

        <View className=' p-4 bg-white rounded-lg mb-3'>
          <Text className=' text-sm block mb-2'>预约备注：</Text>
          <Text className='bg-[#F6F7FB] p-4 rounded-lg block  text-xs leading-5'>
            {detail?.remark || '--'}
          </Text>
        </View>

        <Cell
          titleWidth='120px'
          title='预约时段:'
          value={detail?.time ? `${detail?.time?.appoint_time}` : '待平台确认”'}
          border={false}
          className=' rounded-lg mb-3'
        />

        <Cell
          titleWidth='120px'
          title='预约地址:'
          value={detail?.time?.address}
          border={false}
          className=' rounded-lg mb-3'
        />

        {detail?.suggest && (
          <View className='p-4 bg-white rounded-lg mb-3'>
            <Text className='text-sm block mb-2'>专家建议：</Text>
            <Text className='bg-[#F6F7FB] p-4 rounded-lg block  text-xs leading-5'>
              {detail?.suggest}
            </Text>
          </View>
        )}
      </View>

      <View className=' fixed left-4 right-4 bottom-4'>
        {detail?.status === 1 && (
          <View className=' flex justify-center text-xs text-gary4 mb-2'>
            * 如需取消预约，请联系{' '}
            <Text
              className=' font-bold text-primary'
              onClick={() => openService()}
            >
              平台客服
            </Text>
          </View>
        )}

        {detail?.status === 3 && (
          <>
            {(!detail?.suggest && (
              <Button type='primary' block onClick={() => openEvaluate()}>
                去评价
              </Button>
            )) || (
              <Button disabled block>
                已完成
              </Button>
            )}
          </>
        )}

        {detail?.status === 2 && (
          <Button disabled block>
            已取消
          </Button>
        )}
      </View>
      {renderEvaluateNode()}
      {renderServiceNode()}
    </>
  );
}
